<template>
	<view class="order">
		<view class="section header" @click="showLog">
			{{ planStatus !== 4 ? '维修中' : '已完成' }}
			<uni-icons type="arrowright" size="16" color="#adadad"></uni-icons>
		</view>
		<view class="section">
			<view class="collapseItem">
				<uni-collapse>
					<uni-collapse-item open="true" title="基础信息">
						<view class="record">
							<view class="record_item">
								<view class="record_content">
									<view class="content_title">任务编号</view>
									<view class="number">
										<view>{{ baseInfo.planNum }}</view>
										<view @click="handleClipboard" style="width: 60rpx;">复制</view>
									</view>
								</view>
							</view>
							<view class="record_item">
								<view class="record_content">
									<view class="content_title">故障地点</view>
									<view>{{ baseInfo.address }}</view>
								</view>
							</view>
							<view class="record_item">
								<view class="record_content">
									<view class="content_title">问题描述</view>
									<view>{{ baseInfo.mfDesc }}</view>
								</view>
							</view>
							<view class="record_item noBorder">
								<view class="record_content">
									<view class="content_title">创建时间</view>
									<view>{{ baseInfo.createTime }}</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view class="section">
			<view class="title">
				<view>任务设置</view>
				<view class="noSetting">
					<text v-if="finishDate === null" style="color: #ccc">未设置</text>
					<uni-icons type="arrowup" size="18" color="#adadad" v-if="showOrder" @click="showOrder = !showOrder"></uni-icons>
					<uni-icons type="arrowdown" size="18" color="#adadad" v-else @click="showOrder = !showOrder"></uni-icons>
				</view>
			</view>
			<!-- <uni-collapse>
				<uni-collapse-item open="true" title="任务设置"> -->
			<view class="orderSetiting" v-if="showOrder">
				<view :class="['orderSetiting_item border', planStatus === 4 ? 'noClick' : '']" @click="showStatus">
					<view class="left">电梯状态</view>
					<view class="right">
						<view>{{ isStop === 1 ? '运行中' : '停梯' }}</view>
						<uni-icons type="arrowright" size="12" color="#adadad"></uni-icons>
					</view>
				</view>

				<view :class="['orderSetiting_item', planStatus === 4 ? 'noClick' : '']" @click="showTimeDialog">
					<view class="left">预计时间</view>
					<view class="right">
						<view :class="[finishDate === null ? 'noSelect' : '']">
							<text v-if="finishDate !== null">{{ finishDate }}</text>
							<text v-else>请选择</text>
						</view>
						<uni-icons type="arrowright" size="12" color="#adadad"></uni-icons>
					</view>
				</view>
			</view>
		
		</view>
		<view class="section">
			<view class="record">
				<view class="record_header">
					<view class="title">维修记录</view>
					<view :class="['addRecord', planStatus === 4 ? 'noClick' : '']" @click="handleAddRecord" v-if="planStatus !== 4">
						<uni-icons type="plusempty" size="14" color="#0091FF"></uni-icons>
						添加
					</view>
				</view>
				<view v-for="(item, index) in orderDetailList" :key="index" style="margin-bottom: 20rpx;">
					<view class="record_item">
						<view class="record_content">
							<view style="font-weight: 600;">{{ `作业0${index + 1}` }}</view>
							<view style="flex-direction: row;color: #999;" @click="toRecord(item.groupId)" :class="[planStatus === 4 ? 'noClick' : '']">
								{{ `已添加${item.list.length}个部件` }}
								<uni-icons type="arrowright" size="14" color="#999"></uni-icons>
							</view>
						</view>
						<view class="record_content">
							<view class="content_title">维修类型</view>
							<view>{{ item.status === 1 ? '设备检修' : '部件更换' }}</view>
						</view>
					</view>
					<view class="partList" v-for="e in item.list" :key="e.checkContentId">
						<view class="record_item">
							<view class="record_content">
								<view class="content_title">部件类型</view>
								<view>
									<text>{{ e.checkContentName }}</text>
								</view>
							</view>
						</view>
						<view class="record_item">
							<view class="record_content">
								<view class="content_title">检测记录</view>
								<view>
									<view v-if="e.mfImgUrl !== null">
										<view class="recordImg"><image :src="compressOssImageUrl(v,80)" @click="previewImg(e.mfImgUrl,index)" mode="" v-for="(v,index) in e.mfImgUrl" :key="index"></image></view>
									</view>

									<view class="remark">{{ e.mfDesc === null ? '' : e.mfDesc }}</view>
								</view>
							</view>
						</view>
						<view class="record_item">
							<view class="record_content">
								<view class="content_title">处理结果</view>
								<view>
									<view class="recordImg" v-if="e.disposeImgUrl !== null">
										<image v-for="(v,index) in e.disposeImgUrl" :key="index" :src="v" @click="previewImg(e.disposeImgUrl,index)" ></image>
										</view>
									<view class="remark">{{ e.disposeDesc === null ? '' : e.disposeDesc }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="finish">
			<view class="finishItem">
				<view class="connect" @click="handleCall(csPhone)">
					<uni-icons type="phone-filled" size="20" color="#999"></uni-icons>
					<text>客服</text>
				</view>
				<view class="connect" @click="handleCall(propertyPhone)">
					<uni-icons type="phone-filled" size="20" color="#999"></uni-icons>
					<text>物业</text>
				</view>
			</view>
			<view class="finishItem">
				<view :class="['flex', 'finishOrder', planStatus === 4 ? 'noClick' : '']" @click="handleFinish">{{ planStatus !== 4 ? '维修完成' : '已完成' }}</view>
			</view>
		</view>
		
		<view class="test">
			<!-- 弹出组件 -->
			<task-tracking :list="repairLogList" :show="showTarkLog" :plan-id="planId" @close="closeTaskLog"></task-tracking>
			<neil-modal :show="showDialog" title="电梯状态" confirmText="确认" @close="showDialog = false" @confirm="chooseConfirm">
				<view class="statusType">
					<view v-for="(item, index) in typeList" :key="item" @click="changeType(item)">
						<text>{{ item === 1 ? '运行中' : '停梯' }}</text>
						<uni-icons :type="item === isStop ? 'circle-filled' : 'circle'" size="14" :color="isStop === item ? '#0091ff' : '#999'"></uni-icons>
					</view>
				</view>
			</neil-modal>

			<neil-modal :show="showTime" @close="closeDate" :title="timeChange" @confirm="confirmTime">
				<view class="">
					<apicker
						startYear="2017"
						endYear="2039"
						:value="currentTime"
						:item-height="itemHeight"
						:current="true"
						expand="360"
						:disabled-after="false"
						@change="handlerChange"
					></apicker>
				</view>
			</neil-modal>
		</view>
	</view>
</template>

<script>
import popupLayer from '@/components/popup-layer/popup-layer.vue';
import TaskTracking from '@/components/task-tracking/index.vue';
import neilModal from '@/components/neil-modal/neil-modal.vue';
import { getDetail, updateElevtor, updateOrder, repairLog } from '@/apis/repair.js';
import apicker from '@/components/w-picker/a-pickers.vue';
import { formatSeconds, formatTime } from '@/utils/utils.js';
export default {
	components: {
		popupLayer,
		neilModal,
		apicker,
		TaskTracking
	},
	data() {
		return {
			boolShow: false,
			showDialog: false,
			isStop: 2,
			typeList: [1, 2],
			baseInfo: {}, // 基础信息
			orderDetailList: [],
			planStatus: 0,
			elevatorId: '',
			planId: '',
			showTime: false,
			itemHeight: `height: ${uni.upx2px(88)}px;`,
			repairLogList: [],
			timeChange: '',
			finishDate: '',
			csPhone: '', // 客服电话
			propertyPhone: '', // 物业电话,
			showOrder: true,
			currentTime: '',
			showTarkLog:false // 任务跟踪
		};
	},
	onLoad(option) {
		const result = JSON.parse(option.params);
		console.log(result, 'result');
		this.planId = result.planId;
	},
	onShow() {
		this.queryDetail();
	},
	created() {},
	methods: {
		previewImg(list,item) { 
			this.$previewMedia({
				sources:list,
				current:item 
			});
		},
		showLog() {
			this.showTarkLog = true;
			console.log(this.showTarkLog);
		},
		// close() {
		// 	this.$refs.popupRef.close(); // 或者 boolShow = false
		// },
		// 查询数据
		queryDetail() {
			uni.showLoading({
				title: '数据加载中'
			});
			getDetail({ planId: this.planId }).then(res => {
				if (res) {
					console.log(res, res.data.malfunctionLists);

					this.baseInfo = res.data.maintainMalfunctionWork;
					this.orderDetailList = res.data.malfunctionLists;
					this.planStatus = res.data.planStatus;
					this.isStop = res.data.isStop;
					this.elevatorId = res.data.elevatorId;
					this.finishDate = res.data.finishDate;
					this.propertyPhone = res.data.phone ? res.data.phone : '';
					this.csPhone = res.data.maintainMalfunctionWork && res.data.maintainMalfunctionWork.phone ? res.data.maintainMalfunctionWork.phone : '';
					uni.hideLoading();
				}
			});
		},
		// 编辑记录
		toRecord(groupId) {
			const params = {
				isEdit: true,
				groupId,
				planId: this.planId
			};
			uni.navigateTo({
				url: `/subpages/repair/record?params=${JSON.stringify(params)}`
			});
		},
		// 更新数据
		changeType(res) {
			this.isStop = res;
			updateElevtor({ 
				planId:this.planId,
				id: this.elevatorId,
				isStop: this.isStop,
			}).then(res => {
				if (res) {
					this.queryDetail();
				}
			});
		},
		showStatus() {
			this.showDialog = true;
		},
		handleClipboard() {
			uni.setClipboardData({
				data: this.baseInfo.planNum,
				success: function() {
					// console.log('success');
				}
			});
		},
		// 添加记录
		handleAddRecord() {
			let pages = getCurrentPages();
			const params = {
				isEdit: false,
				planId: this.planId
			};
			// console.log(params, '添加', pages);
			// debugger
			uni.navigateTo({
				url: `/subpages/repair/record?params=${JSON.stringify(params)}`,
				fail: err => {
					console.log(err, 1111);
				}
			});
		},
		showTimeDialog() {
			this.showTime = true;
			this.currentTime = formatTime(new Date().getTime(), '-',true);
			console.log(this.currentTime, 'this.currentTime');
		},
		closeDate() {
			// console.log('关闭时间')
			this.showTime = false;
			this.timeStr = '';
		},
		// 维修完成
		handleFinish() {
			if (this.planStatus === 4) {
				uni.showToast({
					title: '工单已完成',
					icon: 'none'
				});
			}
			if (this.orderDetailList.length === 0) {
				uni.showToast({
					title: '请添加维修记录',
					icon: 'none'
				});
			} else if (this.finishDate === '') {
				uni.showToast({
					title: '预计时间不能为空',
					icon: 'none'
				});
			} else {
				let msg = '';
				for (let item of this.orderDetailList) {
					for (let e of item.list) {
						if (e.mfImgUrl === null && e.mfDesc === null) {
							msg = `${e.checkContentName}检测记录未填写`;
							break;
						}
						if (e.disposeDesc === null && e.disposeImgUrl === null) {
							msg = `${e.checkContentName}处理结果未填写`;
							break;
						}
					}
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				} else {
					updateOrder({ id: this.planId, status: 4 }).then(res => {
						if (res) {
							console.log(res);
							this.$store.commit('refreshData',true);
							uni.navigateBack();
						}
					});
				}
			}
		},
		queryLog() {
			// '1401084952354271233'
			repairLog({ planId:this.planId  }).then(res => {
				this.repairLogList = res.data;
				this.showTarkLog = true;
			});
		},
		closeTaskLog() {
			this.showTarkLog = false;
		},
		// 预计时间 选择
		handlerChange(res) {
			let _this = this;
			_this.result = { ...res };
			if (typeof res.obj.date == 'object') {
				let totalTime = res.obj.date.value + ' ' + res.obj.hour.value + ':' + res.obj.minute.value;
				let todayDateOne = new Date();
				let todayDateTwo = new Date(totalTime);
				let s1 = todayDateOne.getTime() / 1000;
				let s2 = todayDateTwo.getTime() / 1000;
				let s3 = parseInt(s2 - s1);
				let times = formatSeconds(s3);
				_this.timeStr = totalTime;
				_this.timeChange = `预计完成时间${times}`;
			}
		},
		confirmTime() {
			console.log(this.timeStr,'timeStr的值');
			let temp = '';
			if (!this.timeStr) {
				temp = formatTime(new Date().getTime(), '/',true);
			} else {
				temp = this.timeStr.replace(/-/g, '/');
				if (temp && temp.length < 18) {
					temp = temp + ':00';
				} 
			}
			const todayTime = formatTime(new Date().getTime(),'/',true);
			
			if (new Date(todayTime) >= new Date(temp)) {
				uni.showToast({
					title:'预计时间不能小于等于当前时间',
					icon:'none'
				});
			} else {
				console.log('可以提交');
				// return
				updateOrder({ id: this.planId, finishDate: temp.replace(/\//g,'-')}).then(res => {
					console.log(res);
					if (res) {
						this.queryDetail();
					}
				});
			}
			// return
		},
		// 拨打电话
		handleCall(res) {
			uni.makePhoneCall({
				phoneNumber: res // 仅为示例
			});
		}
	}
};
</script>
<style>
page {
	height: 100%;
	background: #d8d8d8;
	font-size: 28rpx;
}
</style>
<style lang="scss" scoped>
.order {
	padding-bottom: 100rpx;
	.statusType {
		view {
			height: 112rpx;
			display: flex;
			justify-content: space-between;
		}
	}
	.empty {
		height: 100rpx;
		color: #ccc;
	}
	.noClick {
		pointer-events: none;
		// background: #ccc;
	}
	.border {
		border-bottom: 2rpx solid #e9e9e9;
	}

	.partList {
		// border-bottom: 2rpx solid #e9e9e9;
	}
	// .connect {
	// 	height: 84rpx;
	// 	display: flex;
	// 	margin-bottom: 72rpx;
	// 	view {
	// 		display: flex;
	// 		flex: 1;
	// 		align-items: center;
	// 		justify-content: center;
	// 		text {
	// 			padding-left: 10rpx;
	// 		}
	// 	}
	// 	.border-right {
	// 		border-right: 2rpx solid #e9e9e9;
	// 	}
	// }
	.finish {
		justify-content: space-between;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		padding: 18rpx 20rpx;
		background-color: #fff;
		.finishItem {
			display: flex;
		}

		.finishOrder {
			width: 524rpx;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			color: #fff;
		}
		.connect {
			display: flex;
			flex-direction: column;
			font-size: 20rpx;
			color: #666;
			align-items: center;
		}
		.connect:nth-child(1) {
			margin-left: 26rpx;
			margin-right: 38rpx;
		}
	}
	.section {
		padding: 18rpx 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		color: #333;
		.title {
			font-size: 32rpx;
			height: 50rpx;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;
			view:nth-child(2) {
				font-weight: normal;
			}
		}
		.noSetting {
			font-size: 24rpx;
		}
		.record {
			display: flex;
			flex-direction: column;
			.record_header {
				display: flex;
				justify-content: space-between;
			}
			.addRecord {
				font-size: 28rpx;
				color: #0091ff;
			}
			.record_item {
				border-bottom: 2rpx solid #e9e9e9;
				padding: 20rpx 0;
				.record_content {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0;
					.content_title {
						color: #666;
						width: 300rpx;
						padding-right: 10rpx;
					}
					view:nth-child(2) {
						display: flex;
						flex-direction: column;
						text-align: right;
						width: 520rpx;
						justify-content: flex-end;
						.recordImg {
							display: flex;
							width: 520rpx;
							flex-wrap: wrap;
							justify-content: flex-end;
							image {
								width: 128rpx;
								height: 128rpx;
								margin: 0 18rpx;
								// border: 1rpx solid #000;
							}
						}
						.remark {
							display: flex;
							align-items: flex-end;
						}
					}
				}
			}
		}
	}
	.header {
		height: 114rpx;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		font-weight: 600;
	}
	.noBorder {
		border: none !important;
	}
	.number {
		width: 500rpx;
		display: flex;
		flex-direction: row !important;
		justify-content: flex-end;
		view:nth-child(2) {
			color: #0091ff;
			padding-left: 16rpx;
		}
	}
	.orderSetiting {
		display: flex;
		flex-direction: column;
		.orderSetiting_item {
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			align-items: center;
			color: #333;
			.left {
				color: #666;
			}
			.right {
				display: flex;
				.noSelect {
					color: #ccc;
					padding: 0 8rpx;
				}
			}
		}
	}
}
</style>
